<div class="profile-page">

    <div class="user-info">
        <div class="container">
            <div class="row">

                <div class="col-xs-12 col-md-10 offset-md-1">
                    <img [src]="profile.image" class="user-img" />
                    <h4>{{ profile.username }}</h4>
                    <p>{{ profile.bio }}</p>
                    <jhi-follow-button [hidden]="isUser" [profile]="profile">
                    </jhi-follow-button>
                    <a [routerLink]="['/settings']" [hidden]="!isUser" class="btn btn-sm btn-outline-secondary action-btn">
              <i class="ion-gear-a"></i> Edit Profile Settings
            </a>
                </div>

            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-md-10 offset-md-1">
                <div class="articles-toggle">
                    <ul class="nav nav-pills outline-active">
                        <li class="nav-item">
                            <a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/features/blog/profile', profile.username]">
                 My Posts
              </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/features/blog/profile', profile.username, 'favorites']">
                 Favorited Posts
              </a>
                        </li>
                    </ul>
                </div>

                <router-outlet></router-outlet>
            </div>

        </div>
    </div>

</div>
